<script setup lang="ts">
import packages from '../../../package.json'

const versionInfo = [
    {
        name: '版本信息',
        description: packages.version,
        link: false
    },
    {
        name: "github地址",
        description: "https://github.com",
        link: true
    }
]

const description = [
    {
        title: '首页',
        description: '总览软件的全部信息，包含使用情况，使用时长，各种信息的总括'
    },
    {
        title: '串口助手',
        description: '包含串口助手的文字接收与发送，以及曲线形式下的串口助手'
    },
    {
        title: '网络助手',
        description: '包含tcp的服务器与客户端的使用，以及udp的使用调试'
    },
    {
        title: '文档笔记',
        description: '将学习到的知识点在软件中纪录，便于后续的使用翻阅'
    },
    {
        title: '游戏',
        description: '包含贪吃蛇、2048等多种小游戏，便于摸鱼调节情绪'
    },
]

</script>

<template>
    <el-card class="card-about">
        <template #header>关于</template>
        <el-text>{{ packages.description }}</el-text>
    </el-card>
    <el-card class="card-about">
        <template #header>项目信息</template>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item v-for="item in versionInfo">
                <template #label>
                    <div class="cell-item">
                        {{ item.name }}
                    </div>
                </template>
                <el-tag size="small">
                    <el-link type="primary" :underline="false" :href="item.description" v-if="item.link">{{ item.name
                        }}</el-link>
                    <template v-else>{{ item.description }}</template>
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card-about">
        <template #header>项目依赖</template>
        <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item v-for="(key, value) in packages.devDependencies">
                <template #label>
                    <div class="cell-item">
                        {{ value }}
                    </div>
                </template>
                <el-tag size="small">{{ key }}</el-tag>
            </el-descriptions-item>
            
            <el-descriptions-item v-for="(key, value) in packages.dependencies">
                <template #label>
                    <div class="cell-item">
                        {{ value }}
                    </div>
                </template>
                <el-tag size="small">{{ key }}</el-tag>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card-about">
        <template #header>功能描述</template>
        <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item v-for="item in description">
                <template #label>
                    <div class="cell-item">
                        {{ item.title }}
                    </div>
                </template>
                <el-text>{{ item.description }}</el-text>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
</template>

<style scoped>
.card-about {
    margin-bottom: 10px;
}

.card-about:last-child {
    margin-bottom: 0;
}
</style>